<template>
  <div class="login-container">
    <div class="left"></div>
    <div class="right">
      <div class="form">
        <h1>登录</h1>
        <el-card shadow="never" class="login-card" body-style="padding:0;">
          <!--登录表单-->
          <!-- el-form > el-form-item > el-input -->
          <el-form ref="form" :model="loginForm" :rules="loginRules">
            <el-form-item prop="mobile">
              <el-input v-model="loginForm.mobile" placeholder="请输入手机号" />
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="loginForm.password"
                show-password
                placeholder="请输入密码"
              />
            </el-form-item>
            <el-form-item prop="isAgree">
              <el-checkbox v-model="loginForm.isAgree">
                用户平台使用协议
              </el-checkbox>
            </el-form-item>
            <el-form-item>
              <el-button style="width: 350px" type="primary" @click="login"
                >登录</el-button
              >
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { validMobile } from "@/utils/validate";
import { mapActions } from "vuex";
export default {
  name: "Login",
  data() {
    const validateMobile = (rule, value, callback) => {
      validMobile(value) ? callback() : callback(new Error("手机号格式不正确"));
    };
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error("密码长度少于6位"));
      } else {
        callback();
      }
    };
    const validateAgree = (rule, value, callback) => {
      if (value) {
        callback();
      } else {
        callback(new Error("您必须勾选用户的使用协议"));
      }
    };
    return {
      loginForm: {
        mobile: "13800000002",
        password: "123456",
        isAgree: false,
      },
      loginRules: {
        mobile: [
          { required: true, trigger: "blur", validator: validateMobile },
        ],
        password: [
          { required: true, trigger: "blur", validator: validatePassword },
        ],
        isAgree: [{ validator: validateAgree }],
      },
      loading: false,
      passwordType: "password",
      redirect: undefined,
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    },
  },
  methods: {
    showPwd() {
      if (this.passwordType === "password") {
        this.passwordType = "";
      } else {
        this.passwordType = "password";
      }
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
    ...mapActions("user", ["Login"]),
    login() {
      const {mobile,password} = this.loginForm;
      // this.Login({mobile,password});
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          this.loading = true;

          await this.Login({ mobile, password }).then(
            () => {
              this.$router.push({ path:"/" });
              this.loading = false;
            },()=>{
              alert("登录失败！");
            }
          )
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
$bg: rgb(218, 218, 218);
$dark_gray: #889aa4;
$light_gray: #eee;
// 修改的css
.login-container {
  background-color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .left {
    flex: 3;
    height: 580px;
    background-image: url("~@/assets/common/login_back.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-top-right-radius: 60px; //圆弧效果
  }
  .right {
    padding-left: 170px;
    // border:1px solid red;
    padding-right: 20px;
    h1 {
      font-size: 24px;
    }
    .login-card {
      border: 0;
    }
  }
}
</style>
